<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>网站后台管理系统HTML模板--模板之家 www.cssmoban.com</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <!--引入Vue组件 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <!--引入axios(vue的异步交互)组件 -->
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <!-- 导入自定义的js配置文件-->
    <script type="text/javascript" src="../js/my_base_config.js"></script>

    <script type="text/javascript">
        // function alertMessage(){
        //     var message="${requestScope.myMessage}";
        //     if (message !=""){
        //         alert(message);
        //     }
        // }

        $(document).ready(function () {
            // alertMessage()

            //为删除链接绑定删除事件
            // $("a[name='deleteAdmin']").click(function (){
            // //如果true就直接跳转到链接的网址；如果是false则不跳转
            //     return window.confirm("确定要删除吗？删除后无法恢复");
            // });
            $(".click").click(function () {
                $(".tip").fadeIn(200);
            });

            $(".tiptop a").click(function () {
                $(".tip").fadeOut(200);
            });

            $(".sure").click(function () {
                $(".tip").fadeOut(100);
            });

            $(".cancel").click(function () {
                $(".tip").fadeOut(100);
            });

        });
    </script>


</head>


<body>
<div id="app">
    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li><a href="#">首页</a></li>
            <li><a href="#">数据表</a></li>
            <li><a href="#">基本内容</a></li>
        </ul>
    </div>

    <div class="rightinfo">

        <div class="tools">

            <form>
                <ul class="forminfo">
                    <li style="display: inline-block;"><label style="width:50px">账号名</label><input name="username"
                                                                                                   type="text"
                                                                                                   class="dfinput"
                                                                                                   v-model="queryForm.username"
                                                                                                   style="width: 150px"/><i></i>
                    </li>
                    <li style="display: inline-block;"><label style="width:50px">姓名</label><input name="name"
                                                                                                  type="text"
                                                                                                  class="dfinput"
                                                                                                  v-model="queryForm.name"
                                                                                                  style="width: 150px"/><i></i>
                    </li>
                    <li style="display: inline-block;"><label style="width:50px">性别</label>
                        <select name="sex" class="dfinput" v-model="queryForm.sex" style="width: 256px;border: #1F3D74">
                            <!--                        <option value=""></option>-->
                            <option value="0">保密</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                        <i></i></li>
                    <li style="display: inline-block;"><input name="" type="button" class="btn" value="查询"
                                                              @click="reaAdmins"/></li>
                    <li style="display: inline-block;"><input name="" type="button" class="btn" value="重置"
                                                              @click="reset"/></li>
                </ul>
            </form>

            <ul class="toolbar">
                <a href="adminadd.html">
                    <li class="click"><span><img src="../images/t01.png"/></span>添加管理员账号</li>
                </a>
                <li class="click" @click="removes()"><span><img src="../images/t03.png"/></span>批量删除</li>
            </ul>
        </div>


        <table class="tablelist">
            <thead>
            <tr>
                <th><input name="" type="checkbox" value="" checked="checked" v-model="allChecked" @change="selectAll"/>
                </th>
                <th>头像</th>
                <th>账户名</th>
                <th>姓名</th>
                <th>性别</th>
                <th>锁定状态</th>
                <th>个人头像</th>
                <th>注册时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="admin in table.data" :key="admin.id">
                <td><input name="" type="checkbox" :value="admin.id" v-model="mvltipleSelection"/></td>
                <td>
                    <!--                    <img src="" alt="" style="height: 30px;"/>-->
                    <img v-if="admin.photo!=null&&admin.photo!=''" :src="`${server_url}${admin.photo}`"
                         style="height: 30px;"/>
                    <img v-else src="../images/nopic.jpg" style="height: 30px;"/>
                </td>
                <td>{{admin.username}}</td>
                <td>{{admin.name}}</td>
                <td>
                    {{sexMap[admin.sex]}}
                </td>
                <td>
                    <!--第一种-->
                    <!--                <span v-if="admin.unLocked" style="color: green">未锁定</span>-->
                    <!--                <span v-else style="color: red">已锁定</span>-->
                    <!--第二种-->
                    <span :style="admin.unLocked?'color: green;':'color: red;'">{{unLockedMap[admin.unLocked]}}</span>
                    <!--                <c:choose>-->
                    <!--                    <c:when test="${admin.unLocked == true}"><span style="color: green">未锁定</span></c:when>-->
                    <!--                    <c:otherwise><span style="color: red">已锁定</span></c:otherwise>-->
                    <!--                </c:choose>-->
                </td>
                <td>{{admin.photo}}</td>
                <td>
                    {{admin.createTime}}
                    <!--                <fmt:formatDate value="${admin.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>-->
                </td>
                <td>
                    <a href="#" class="tablelink" @click="edit(admin.id)">修改</a>
                    <a name="deleteAdmin" href="#" class="tablelink" @click="remove(admin.id,admin.username)"> 删除</a>
                </td>
            </tr>
            </tbody>
        </table>


        <div class="pagin">
            <div class="message">共<i class="blue">{{table.totalRecords}}</i>条记录，当前显示第&nbsp;<i class="blue">{{table.page}}</i>页
            </div>
            <ul class="paginList">
                <li class="paginItem" @click="pageChange(1)"><a href="javascript:;">首页</a></li>
                <li class="paginItem" @click="pageChange(table.page-1)"><a href="javascript:;">上一页</a></li>
                <li class="paginItem" @click="pageChange(table.page+1)"><a href="javascript:;">下一页</a></li>
                <li class="paginItem" @click="pageChange(table.maxPage)"><a href="javascript:;">末页</a></li>

            </ul>
        </div>


    </div>
</div>

<script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');

    new Vue({
        el: '#app',
        data: {
            server_url: server_url,
            queryForm: {
                username: '',
                name: '',
                sex: ''
            },
            table: {//表格数据，包括分页
                data: [],//当前页记录
                page: 1,//页码
                pageSize: 10,//每页显示的记录数
                totalRecords: 0,//总记录数
                maxPage: 1,//最大页面
            },
            sexMap: {0: '保密', 1: '男', 2: '女'},//在前端设置一个字典，用于根据后端传递过来的键来显示对应的值
            unLockedMap: {true: '不锁定', false: '锁定'},
            mvltipleSelection: [],//复选框
            allChecked: false,
        },
        methods: {
            reaAdmins() {//读取管理员列表
                this.mvltipleSelection = [];
                const query = Object.assign(this.queryForm, {
                    page: this.table.page,
                    pageSize: this.table.pageSize
                })
                axios
                    .get("/backstage/adminmanage/list", {
                        params: query
                    })
                    .then(response => {
                        const responseData = response.data;//response.data表示获取接口返回数据（）此处登录接口是json数据）
                        if (responseData.success) {//如果成功
                            this.table = responseData.data;
                        }
                    });
            },
            reset() {//重置查询表单
                //将查询表单数值重置为空
                this.queryForm.username = ""
                this.queryForm.name = "";
                this.queryForm.sex = "";
                //重新加载表格数据
                this.reaAdmins();
            },
            remove(id, username) {//删除指定记录
                if (window.confirm(`确定要删除${username}吗？删除后无法恢复`)) {//如果确定删除
                    axios
                        .delete(`/backstage/adminmanage/${id}`)
                        .then(response => {
                            const responseData = response.data;
                            if (responseData.success) {//如果删除成功
                                //刷新表格数据
                                this.reaAdmins();
                            } else {
                                alert(responseData.msg);
                            }
                        });
                }
            },
            edit(id) {//跳转到指定账户的修改页面
                sessionStorage.setItem("adminId", id);//存在浏览器sessionStorage对象中
                location.href = "adminupdate.html";
            },
            pageChange(page) {
                //对页码进行验证处理
                if (page < 1) {
                    this.table.page = 1;
                } else if (page > this.table.maxPage) {
                    this.table.page = this.table.maxPage;
                } else {
                    this.table.page = page;
                }
                //重新读取表格数据
                this.reaAdmins();
            },
            removes() {
                console.log("批量删除", this.mvltipleSelection);
                if (window.confirm(`确定要删除${this.mvltipleSelection.length}个账户吗？删除后无法恢复`)) {//如果确定删除
                    axios
                        .delete('/backstage/adminmanage', {
                            data: JSON.stringify(this.mvltipleSelection)
                            // params:{
                            //     ids:this.mvltipleSelection.toString()
                            // }
                        })
                        .then(response => {
                            const responseData = response.data;
                            if (responseData.success) {//如果删除成功
                                //刷新表格数据
                                this.reaAdmins();
                            } else {
                                alert(responseData.msg);
                            }
                        });
                }
            },
            selectAll() {
                this.mvltipleSelection = [];
                if (this.allChecked) {
                    this.table.data.forEach(item => {
                        this.mvltipleSelection.push(item.id)
                    })
                }
            }
        },

        mounted() {//当页面元素加载完成之后，自动执行里面的代码
            this.reaAdmins();
        },
        watch: {
            mvltipleSelection: {
                handler(newValue, oldValue) {
                    if (this.table.data.length > 0) {
                        if (newValue.length == this.table.data.length) {
                            this.allChecked = true;
                        } else {
                            this.allChecked = false;
                        }
                    }
                }
            }
        }
    });
</script>
</body>
</html>
